import React from "react";

const PaddingMarginDemo: React.FC = () => {
  return (
    <div className="container mx-auto p-8 bg-yellow-200">
      <h1 className="text-3xl text-red-600 font-bold mb-8">
        Padding (p-4) vs Margin (m-4) Demo
      </h1>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* Padding Demo */}
        <div className="bg-white p-4 rounded-lg shadow">
          <h2 className="text-xl font-semibold mb-4">Padding (p-4)</h2>
          <div className="bg-blue-200 p-4 relative">
            <div className="bg-blue-500 p-4 text-white">Content</div>
            <div className="absolute inset-0 border-4 border-dashed border-blue-500 pointer-events-none"></div>
            <div className="absolute top-0 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white px-2 text-sm">
              p-4
            </div>
          </div>
          <p className="mt-4 text-sm text-gray-600">
            Padding is the space inside the element, between its content and its
            border.
          </p>
        </div>

        {/* Margin Demo */}
        <div className="bg-white p-4 rounded-lg shadow">
          <h2 className="text-xl font-semibold mb-4">Margin (m-4)</h2>
          <div className="bg-green-200 p-4 relative">
            <div className="bg-green-500 m-4 p-4 text-white relative">
              Content
              <div className="absolute inset-0 border-4 border-dashed border-green-500 pointer-events-none"></div>
            </div>
            <div className="absolute top-1/2 left-0 transform -translate-y-1/2 bg-green-500 text-white px-2 text-sm">
              m-4
            </div>
          </div>
          <p className="mt-4 text-sm text-gray-600">
            Margin is the space outside the element, creating distance from
            other elements.
          </p>
        </div>

        {/* Combined Demo */}
        <div className="bg-white p-4 rounded-lg shadow md:col-span-2">
          <h2 className="text-xl font-semibold mb-4">
            Combined Padding and Margin
          </h2>
          <div className="bg-purple-200 p-8 relative">
            <div className="bg-purple-500 m-4 p-4 text-white relative">
              Content
              <div className="absolute inset-0 border-4 border-dashed border-purple-300 pointer-events-none"></div>
            </div>
            <div className="absolute top-0 left-1/2 transform -translate-x-1/2 bg-purple-500 text-white px-2 text-sm">
              p-8 (container)
            </div>
            <div className="absolute top-1/2 left-0 transform -translate-y-1/2 bg-purple-500 text-white px-2 text-sm">
              m-4
            </div>
            <div className="absolute bottom-1/4 right-0 transform translate-y-1/2 bg-purple-500 text-white px-2 text-sm">
              p-4
            </div>
          </div>
          <p className="mt-4 text-sm text-gray-600">
            This example shows how padding and margin work together. The outer
            container has padding (p-8), while the inner element has both margin
            (m-4) and padding (p-4).
          </p>
        </div>
      </div>
    </div>
  );
};

export default PaddingMarginDemo;
